<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
.a .b::backdrop { background-color: green; }
</style>
<div id="t">
    <dialog class="b" id="dialog"><span></span><span></span><span></span></dialog>
</div>
<script>
description("Change class affecting ::backdrop style");

var dialog = document.getElementById("dialog");

dialog.showModal();

var green = 'rgb(0, 128, 0)';

shouldNotBe("getComputedStyle(dialog, '::backdrop').backgroundColor", "green");

document.body.offsetLeft;
document.getElementById("t").className = "a";

if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");

shouldBe("getComputedStyle(dialog, '::backdrop').backgroundColor", "green");

dialog.close();
</script>
